<template>
  <div class="engine-list">
    <p class="engine-list-title">数据汇总</p>
<!--    <task-class title="engine" @on-change="onChange"></task-class>-->
    <div class="engine-list-content" v-loading="loadingData">
      <engine-center-card v-for="(item, index) in engineList" :key="index" :obj="item"></engine-center-card>
    </div>
    <div class="task-center-page">
      <Page
        :total="listQuery.total"
        :current="listQuery.pageNum"
        @on-change="pageChange"
      ></Page>
    </div>
  </div>
</template>

<script>
  import TaskClass from "../taskClass/TaskClass";
  import api from "@/api/project";
  import EngineCenterCard from "./EngineCenterCard";
  import {mapState} from 'vuex';
  export default {
    name: "EngineList",
    components: {EngineCenterCard, TaskClass},
    data() {
      return {
        listQuery: {
          total: 10,
          pageNum: this.$store.state.baseTask.pageNum
        },
        selectedType: 'port-2-engine',
        loadingData: false,
        tableData: {
          list: [],
          total: 0
        },
        engineList: []
      }
    },
    computed: {
    },
    methods: {
      pageChange() {},
      getEngineList() {
        this.loadingData = true;
        let _this = this;
        let body = {
          pageNum: 1,
          pageSize: 10000,
          filterList: [],
          sortList: [],
          searchKey: null
        }
        api.selectPage(body).then(({data}) => {
          this.loadingData = false;
          if (data.returnCode === 200) {
            this.tableData.list = data.returnData.pageInfo.list;
            this.dataFilter();
          } else {
            this.$Message.warning(data.returnMsg)
          }
        }).catch(error => {
          this.$Notice.error('操作失败!')
        })
      },
      onChange(type) {
        this.selectedType = type;
        this.dataFilter();
      },
      dataFilter() {
        let list = [];
        this.tableData.list.forEach(item => {
          if(item.projectType === this.selectedType) {
            list.push(item);
          }
        });
        this.engineList = list;
      }
    },
    mounted() {
      if (this.$route.query !== undefined && this.$route.query.type !== undefined) {
        this.selectedType = this.$route.query.type;
      }
      this.getEngineList();
    }
  }
</script>

<style lang="less" scoped>
  .engine-list {
    position: relative;
    width: 100%;
    margin-top: 10px;
    .engine-list-title {
      font-size: 16px;
      font-weight: bold;
      padding: 10px 0;
    }
    .engine-list-content {
      width: 100%;
      min-height: 100px;
    }
    .task-center-page {
      display: flex;
      justify-content: center;
      margin-top: 20px;
    }
  }
</style>
